<template>
  <div class="history-list">
    <div class="history-list-content" @click="onListClick">
      <div class="left">
        <div class="name">{{listData.message}}</div>
        <div class="date">{{createdTime}}</div>
      </div>
      <div class="right">{{listData.gold}}</div>
    </div>
    <div class="history-list-detail" v-show="showDetail">
      <div class="detail-list">
        <div>{{coinType}}金币</div>
        <div class="value">{{coinNumber}}个</div>
      </div>
      <div class="detail-list">
        <div>类型</div>
        <div class="value" v-if="listData.gold < 0">支出</div>
        <div class="value" v-else>收入</div>
      </div>
      <div class="detail-list">
        <div>时间</div>
        <div class="value">{{createdTime}}</div>
      </div>
      <div class="detail-list" v-if="listData.op === 'ORDER:CREATE'">
        <div>激活码</div>
        <div class="value">{{listData.extend}}<span class="color" @click="onCopyClick(listData.extend)">[复制]</span></div>
      </div>
      <div class="detail-list">
        <div>剩余金币</div>
        <div class="value">{{listData.ngold}}</div>
      </div>
      <div class="detail-list" v-if="listData.message">
        <div>备注</div>
        <div class="value">{{listData.message}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from 'comp/mixins'

export default {
  mixins: [mixins],
  props: {
    listData: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      showDetail: false
    }
  },
  computed: {
    createdTime () {
      let output
      const time = this.listData.created
      if (time) {
        output = this.timeFilter(time)
      }
      return output
    },
    coinType () {
      const output = this.listData.gold < 0 ? '出账' : '入账'
      return output
    },
    coinNumber () {
      const output = this.listData.gold < 0 ? this.listData.gold * -1 : this.listData.gold
      return output
    }
  },
  mounted () {
  },
  methods: {
    onListClick () {
      this.showDetail = !this.showDetail
    },
    /**
     * 复制激活码
     */
    onCopyClick (val) {
      wx.setClipboardData({
        data: val,
        success: (res) => {
          wx.showToast({
            title: '复制成功'
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.history-list {
  &-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 30rpx;
    border-bottom: 1rpx solid #e6ebf0;
    background-color: #fff;
    &:active {
      background: #d8d8d8;
    }
    .name {
      font-size: 32rpx;
      color: #333;
    }
    .date {
      font-size: 26rpx;
      color: #777;
      padding-top: 14rpx;
    }
    .right {
      font-size: 36rpx;
      color: #333;
      &.color {
        color: #f1c703;
      }
    }
  }
  &-detail {
    padding: 35rpx 30rpx 15rpx;
    background-color: #f8f8f8;
    .detail-list {
      display: flex;
      justify-content: space-between;
      font-size: 30rpx;
      color: #777;
      margin-bottom: 20rpx;
      .value {
        color: #333;
        .color {
          color: #488ff0;
        }
      }
    }
  }
}
</style>
